<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//给li绑定两种事件：单击和鼠标移入
				$("li").bind("click mouseenter" , function(){
					alert(this.innerHTML);
				});
				
				//点击第一个button，将#bj上的mouseenter事件移除
				//unbind()可以移除指定的事件，只需要传一个事件名作为参数
				//unbind(type,[data|fn]])
				//type事件类型  当传入type的时候会解除type事件
				//如果没有传入type值，会移除所有事件
				$("button:eq(0)").click(function(){
					$("li").unbind("click mouseenter");
				});
				
				//点击第二个button，将#rl上的所有事件移除
				$("button:eq(1)").click(function(){
					
				});
			});
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>
			</div>
			<button>移除#bj的mouseenter事件</button>
			<button>移除#rl所有事件</button>
		</div>
	</body>
</html>
